import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { FormattedMessage } from 'umi/locale';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import MenuView from '@/components/MenuView';
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import { stringify } from 'querystring';

@connect(({ product }) => ({
  currentProduct: product.currentProduct,
}))
class MainView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menuMap: {},
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    if (location.query.productId) {
      this.setState({ mode: 'view' });
      dispatch({
        type: 'product/fetchCurrent',
        payload: {
          pathParams: {
            id: location.query.productId,
          },
        },
      });
    }
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: 'product/clearCurrent' });
  }

  static getDerivedStateFromProps(props, state) {
    const { currentProduct, location } = props;
    let disabled = true;
    let query = '';
    if (!isEmpty(currentProduct)) {
      disabled = false;
      query = stringify({
        productId: currentProduct.id,
        backRoute: location.query.backRoute,
        entry: location.query.entry,
        viewId: 'product',
        type: currentProduct.productGroup,
        startSchemaId: currentProduct.regionStart,
        endSchemaId: currentProduct.regionEnd,
      });
    }
    let menuMap = {
      base: {
        path: `/product/${location.query.entry}/add/base?${query}`,
        title: '基本信息',
      },
      // weight: {
      //   path: `/product/${location.query.entry}/add/weight?${query}`,
      //   title: '计重规则',
      //   disabled,
      // },
      service: {
        path: `/product/${location.query.entry}/add/service?${query}`,
        title: '服务配置',
        disabled,
      },
      scope: {
        path: `/product/${location.query.entry}/add/scope/${currentProduct.regionStart}?${query}`,
        title: '产品范围',
        disabled,
      },
      operationLog: {
        path: `/product/${location.query.entry}/add/operationLog?${query}`,
        title: '操作日志',
        disabled
      },
    };
    return {
      menuMap,
    };
  }

  render() {
    const { children, ...restProps } = this.props;
    const { menuMap } = this.state;
    return (
      <PageHeaderWrapper title="返回" backRoute={restProps.location.query.backRoute}>
        <MenuView menuMap={menuMap} {...restProps}>
          {children}
        </MenuView>
      </PageHeaderWrapper>
    );
  }
}

export default MainView;
